import React, { Component } from 'react'

export class TabAlert extends Component {
    constructor(props) {
        super(props)

        this.state = {
            active: 0 //tab切换高亮下标
        }
    }
    render() {
        const { active } = this.state
        const { tabFlag, list, addFn, newArr } = this.props
        return (
            <div style={tabFlag ? { display: "block" } : { display: "none" }}>
                {/* 1.tab切换--高亮切换  */}
                <ul className='tabTitle'>
                    {list.length ?
                        list.map((item, index) => {
                            return <li
                                key={item.id}
                                onClick={() => { //点击高亮切换
                                    this.setState({
                                        active: index
                                    })
                                }}

                                className={active === index ? "on" : ""} //高亮项
                            >{item.title}</li>
                        }) : "暂无数据"}
                </ul>

                {/* 超出的内容盒子 ---点击显示隐藏 */}
                <div className='more'>
                    {
                        list.length ?
                            list.map((item, index) => {
                                return index > 5 ? <li
                                    key={item.id}
                                    onClick={() => {
                                        this.setState({
                                            active: index
                                        })
                                    }}
                                    className={active === index ? "on" : ""}
                                >{item.title}</li> : null
                            }) : "暂无数据"
                    }
                </div>

                {/* 2.对应的tab内容切换  */}
                <ol className='tabCont'>
                    {
                        list[active] ?
                            list[active].children.map((item, index) => {
                                return <li
                                    key={item.id}
                                    onClick={() => { //点击将选中的标签添加到新数组中
                                        addFn(item.title)
                                    }}
                                    //通过查找数组中是否存在，控制选中的标签高亮
                                    className={newArr.includes(item.title) ? "on" : ""}

                                >{item.title}</li>
                            }) : "暂无数据"
                    }
                </ol>

            </div>
        )
    }
}

export default TabAlert